<template>
    <div class="designer">
      <!-- <my-process-palette /> -->
      <my-process-designer
        :key="`designer-${reloadIndex}`"
        :options="{
          taskResizingEnabled: true,
          eventResizingEnabled: true
        }"
        v-model="xmlString"
        v-bind="controlForm"
        keyboard
        ref="processDesigner"
        @element-click="elementClick"
        @element-contextmenu="elementContextmenu"
        @init-finished="initModeler"
        @save="onSaveProcess"
      >
      </my-process-designer>
      <my-properties-panel :key="`penal-${reloadIndex}`" :bpmn-modeler="modeler" :prefix="controlForm.prefix" :formVersionId="formVersionId" class="process-panel"/>
    </div>
</template>

<script>

import "./package/theme/element-variables.scss";
import Vue from 'vue';
import { vuePlugin } from "./package/highlight";
import "highlight.js/styles/atom-one-dark-reasonable.css";
Vue.use(vuePlugin);

import MyPD from "./package/index.js";
Vue.use(MyPD);
import "./package/theme/index.scss";

import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";

// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
import CustomContentPadProvider from "./package/designer/plugins/content-pad";
// 自定义左侧菜单（修改 默认任务 为 用户任务）
import CustomPaletteProvider from "./package/designer/plugins/palette";
// import Log from "./package/Log";

// clickoutside
import clickoutside from "element-ui/lib/utils/clickoutside";

export default {
  name: "index",
  props: {
    bpmnInfo: {
      type: Object,
      required: true
    },
    formVersionId: {
      type:String,
      required: true
    }
  },
  directives: {
    clickoutside: clickoutside
  },
  data() {
    return {
      xmlString: this.bpmnInfo.xml,
      modeler: null,
      reloadIndex: 0,
      // translationsSelf: translations,
      controlForm: {
        processId: this.bpmnInfo.processId,
        processName:this.bpmnInfo.processName,
        simulation: true,
        labelEditing: false,
        labelVisible: false,
        prefix: "flowable",
        headerButtonSize: "mini",
        events: ["element.click", "element.contextmenu"],
        additionalModel: [
          CustomContentPadProvider,
          CustomPaletteProvider
        ]
      },
      addis: {
        CustomContentPadProvider,
        CustomPaletteProvider
      },
    };
  },
  created() {
    // console.log(this.bpmnInfo)
    // console.log(JSON.stringify(this.bpmnInfo))
  },
  methods: {
    initModeler(modeler) {
      setTimeout(() => {
        this.modeler = modeler;
        // const canvas = modeler.get("canvas");
        // const rootElement = canvas.getRootElement();
        // Log.prettyPrimary("Process Id:", rootElement.id);
        // Log.prettyPrimary("Process Name:", rootElement.businessObject.name);
      }, 10);
    },
    elementClick(element) {
      // console.log(element);
      this.element = element;
    },
    elementContextmenu(element) {
      console.log("elementContextmenu:", element);
    },
    onSaveProcess(){
      // console.log('+++++++++')
      // console.log(this.xmlString)
      this.$emit('save', this.xmlString);
    },
  }
};
</script>

<style lang="scss" scoped>
.designer {
  width: 100%;
  // min-height: 900px;
  // min-height: calc(100vh - 164px);
  box-sizing: border-box;
  display: inline-grid;
  grid-template-columns: auto max-content;
  
  .zoom-in-right-enter-active,
  .zoom-in-right-leave-active {
    opacity: 1;
    transform: scaleY(1) translateY(-48px);
    transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: right center;
  }
  .zoom-in-right-enter,
  .zoom-in-right-leave-active {
    opacity: 0;
    transform: scaleX(0) translateY(-48px);
  }
}
</style>
